<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频网页2</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .video-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 800px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box {
  position: relative;
}

video {
  width: 100%;
}

.comment {
  display: flex;

  margin-top: 20px;
}

.clickNum,
.praiseNum {
  text-align: center;
}

.clickNum h3,
.praiseNum h3 {
  margin: 0;
  color: #333;
}

.cNum,
.pNum {
  margin: 5px 10px;
  font-size: 16px;
  color: #666;

}
button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #3498db;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, opacity 0.3s;
}

button:hover {
  background-color: #2980b9;
}

button:active {
  background-color: #2980b9; /* 点击后背景色变为悬停时的颜色 */
  opacity: 0.5; /* 点击后设置按钮半透明表示不可再点击 */
}
</style>
</head>
<body>
<div class="video-container">
    <div class="title"></div>
    <div class="box">
      <video id src=""></video><br>
    </div>
    <div class="comment">
        <h3>播放量:</h3><h3><div class="cNum"></div></h3>
        <h3>点赞量:</h3><h3><div class="pNum"></div></h3>
        <button type="button">点赞</button>
    </div>
    
</div>




<script src="../js/axios.min.js"></script>
<script>
  //传递数据
  const urlParams = new URLSearchParams(window.location.search);
  const originData = {};
  urlParams.forEach((value, key) => {
    originData[key] = value;
  });
  const videoName = originData.videoName
  axios({
    url:`http://localhost:8080/private/video?videoName=${videoName}`,
    method:"get"
  }).then(result => {
    const data = result.data.data
    console.log("data:",data);
    const videoContainer = document.querySelector(".video-container")

    //标题
    const title = document.querySelector(".title")
    title.textContent = data.videoName
    
    //播放量
    const cNum = document.querySelector(".cNum")
    cNum.textContent = data.clickNum

    //点赞数
    const pNum = document.querySelector(".pNum")
    pNum.textContent = data.praiseNum


    const video = document.querySelector("video")
    video.src = data.netPlace;
    video.controls = true;
    video.autoplay = false; // 可选，是否自动播放

    //点赞机构
    const praise = document.querySelector("button");
    praise.addEventListener('click', function() {
    this.disabled = true;
    this.textContent = '已点赞';

    const id= data.id
    console.log(id);

    axios({
      url: `http://localhost:8080/private/praise/${id}`,
      method: 'get',
      }).then(result => {
        console.log(result.data.data);
        const pNum = document.querySelector(".pNum");
        pNum.textContent = result.data.data.praiseNum;
        data.praiseNum = result.data.data.praiseNum;
      }).catch(error => {
        console.error(error);
        // 如果请求失败，可以在这里考虑取消禁用按钮的操作
        this.disabled = false;
        this.textContent = '点赞';
      });
    });
  }).catch(error => {
    console.error(error);
  });

  //获取被点击事件的id
  
  console.log("id:",id);
  
  
</script>

</body>
</html>